<!--
 * @作者: 陈菲
 * @文件作用:图片文件上传
 *@param {String} limit-文件上传的个数
-->
<template>
  <div class="file_pic">
    <ElUpload
      ref="uploadpic"
      action="#"
      list-type="picture"
      :file-list="uploadPics"
      :on-change="handleChangePics"
      :accept="accept"
      :limit="limit"
      :show-file-list="true"
      :before-upload="beforeUploadPic"
      :http-request="handleRequestPic"
      :on-exceed="handleExceed"
      :on-remove="handleRemove"
      class="picture_style"
      :multiple="true"
    >
      <ElIcon :size="20"><Picture /></ElIcon>
    </ElUpload>
    <div class="el-upload__tip_img">({{ desc }})</div>
  </div>
</template>

<script setup>
import { onMounted, ref, toRefs } from 'vue';
import { Picture } from '@element-plus/icons-vue';
import { ElMessage, ElUpload, ElIcon } from 'element-plus';
import { UPLOAD_FILE_TYPE_PHOTO, UPLOAD_FILE_SIZE_PHOTO } from '../common/common-helper';

const props = defineProps({
  limit: {
    type: Number,
    default: 9,
  },
  accept: {
    type: String,
  },
  desc: {
    type: String,
  },
  fileList: {
    type: Array,
  },
});
const { limit, accept, desc, fileList } = toRefs(props);

const emit = defineEmits(['getFileList', 'getFileListRemove']);
const uploadPics = ref([]);
const picture = ref([]);

const beforeUploadPic = (file) => {
  const isAPK = UPLOAD_FILE_TYPE_PHOTO(file);

  if (!isAPK) {
    // 类型不匹配
    ElMessage({
      message: `上传图片只能是.jpg.jpeg.png.bmp 格式!`,
      type: 'warning',
    });

    return isAPK;
  }

  const isLt10M = UPLOAD_FILE_SIZE_PHOTO(file);

  if (!isLt10M) {
    ElMessage({
      message: `上传图片大小不能超过10MB!`,
      type: 'warning',
    });

    return isLt10M;
  }
};

const handleExceed = (files, fileList) => {
  ElMessage({
    message: `当前限制选择 ${props.limit} 个文件，已经选择了 ${fileList.length} 个文件`,
    type: 'warning',
  });
};

const handleRequestPic = () => {
  const prom = new Promise(() => {});

  prom.abort = () => {};

  return prom;
};

const handleChangePics = (uploadFile, uploadFiles) => {
  picture.value = uploadFiles;
  uploadPics.value = uploadFiles;

  emit('getFileList', uploadFile);
};

const handleRemove = (uploadFile, uploadFiles) => {
  picture.value = uploadFiles;
  emit('getFileListRemove', uploadFile);
};

onMounted(() => {
  // 判断是否有默认图片
  if (fileList.value.length) {
    const newFileList = fileList.value.map((item) => {
      return {
        name: item.title ?? item.name,
        url: item.address ?? item.url,
        size: item.size,
      };
    });

    uploadPics.value = newFileList;
  } else {
    uploadPics.value = [];
  }
});
</script>

<style lang="scss" scoped>
.file_pic {
  width: 100%;
  text-align: left;
  :deep(.el-upload) {
    width: 40px;
    height: 40px;
    color: #d5d7e3;
    border: 1px solid #d5d7e3;
    border-radius: 5px;
  }
  :deep(.el-upload-list) {
    display: flex;
    flex-wrap: wrap;
    width: 481px !important;
  }
  :deep(.el-upload-list--picture .el-upload-list__item) {
    position: relative;
    width: 75px;
    height: 80px;
    margin-right: 4px;
    padding: 0;
  }
  :deep(.el-upload-list--picture .el-upload-list__item-thumbnail) {
    width: 100%;
    width: none;
    height: 100%;
    object-fit: cover;
  }
  :deep(.el-upload-list--picture .el-upload-list__item .el-icon--close) {
    top: 5px;
    z-index: 9;
    color: #000;
    font-weight: 800;
  }
}

:deep(.el-upload-list__item .el-upload-list__item-info) {
  display: none !important;
}
.el-upload__tip_img {
  position: absolute;
  top: 2px;
  left: 45px;
  color: #cccccc;
  font-size: 16px;
}
</style>
